<template>
    <div class="foods">
        <div class="nav_left" ref="navLeft">
            <ul>
                <li v-for="(item, index) in foods" :key="index"  
                :class="getIndex==index?'nav_item active':'nav_item'" @click="selectFood(index)">
                     {{ item.name }}
                </li>
            </ul>
        </div>
        <div class="content_right" ref="contentright">
            <div>
                <div v-for="(item, index) in foods" :key="index" class="item_content"> 
                <div class="title">
                    {{ item.name }}<span>{{ item.description }}</span>
                </div>
                <ul>
                    <li class="foods_item" v-for="(value,i) in item.foods" :key="i">
                        <div class="foods_img">
                            <img :src="'//elm.cangdu.org/img/'+value.image_path" alt="">
                        </div>
                        <div class="foods_right">
                            <div class="foodname">
                                {{value.name}}
                            </div>
                            <div class="food_msg">
                                   {{value.tips}}
                            </div>
                             <div class="foodsprice">
                                    <span class="price">¥{{ value.specfoods[0].price }}</span>
                                    <span style="float: right;">
                                        <!-- <van-tag color="#3190e8" round plain>-</van-tag> -->
                                        <span class="reduce" v-show="value.num > 0" @click="reduce(value.specfoods,value)">
                                            -
                                        </span>
                                        <span v-show="value.num > 0">
                                            {{ value.num }}
                                        </span>
                                        <van-tag round type="primary" v-if="value.specfoods.length == 1"
                                            @click="addCart(value.specfoods[0])">+</van-tag>
                                        <van-tag type="primary" v-else @click="changSku(index, i)">选规格</van-tag>
                                    </span>
                                </div>
                        </div>

                    </li>
                </ul>
            </div>
            </div>
        </div>

             <van-dialog v-model="show" :title="title" :showConfirmButton="false" width="250px" className="mydialog"
            closeOnClickOverlay>
            <div class="msk">
                <div style="padding: 7px;">
                    <div class="guige">
                        规格
                    </div>
                    <div class="specfoods">
                        <div v-for="(item, index) in specfoods" :key="index"
                            :class="active == index ? 'specfood_item actives' : 'specfood_item'" @click="getSku(index)">
                            {{ item.specs_name }}
                        </div>
                    </div>
                </div>
                <div class="contr" v-if="sku">
                    <div class="price">
                        ￥ {{ sku.price }}
                    </div>
                    <div class="btn" @click="addSkuCart">
                        加入购物车
                    </div>
                </div>
                <div class="close">
                    <van-icon name="cross" @click="show = false" />
                </div>
            </div>
        </van-dialog>
    </div>
</template>
<script>
import BScroll from '@better-scroll/core';
import { Toast } from 'vant';
export default {
    props:['foods'],
    data() {
        return {
           scrollTopList:[],
            rigthScroll:null,
            scrollY:0,
            id: null,
            show: false,
            title: "",
            specfoods: [],
            active: 0,
            sku: null
        }
    },
    mounted() {
     this.id = this.$route.query.id;
    this.$nextTick(() => {
            new BScroll(this.$refs.navLeft, {
                // 开启滚动区域的点击事件
                click: true
            });
            this.rigthScroll = new BScroll(this.$refs.contentright, {
                // 开启监听滚动事件
                probeType: 3,
                click: true
            });
            // 监听better-scroll 滚动
            this.rigthScroll.on('scroll', (top) => {
                // 取反 y轴滚动距离
                this.scrollY = Math.abs(top.y);

            })
            this.getHeight();
            this.getFoodsNum();
        })
    },
    methods: {
        addSkuCart() {
            this.addCart(this.sku);
            this.show = false;
        },
        // 获取当前选中的商品规格
        getSku(index) {
            this.active = index;
            this.sku = this.specfoods[index];
        },
        changSku(index, i) {
            console.log(this.foods[index].foods[i])
            // 找到当前点击的商品食物
            let foods = this.foods[index].foods[i];
            this.title = foods.name;
            this.specfoods = foods.specfoods;
            this.show = true;
            // 给当前选中的sku赋值
            this.sku = this.specfoods[this.active]
        },
        selectFood(index) {
            // 滚动到对应位置
            this.rigthScroll.scrollTo(0, -this.scrollTopList[index], 300)
        },
        getHeight() {
            // 声明第一块儿滚动距离的高度为0
            let height = 0;
            // 将第一块儿滚动的距离添加数组中
            this.scrollTopList.push(height);
            // 第二块儿滚动到顶部的距离 = height + 第一块儿的高度
            // 获取所有滚动块儿标签
            let allDom = this.$refs.contentright.getElementsByClassName("item_content");
            // 将为数组转化为真是数组；
            let newArry = Array.from(allDom);
            newArry.forEach(item => {
                // 获取每一块儿高度
                let domHeight = item.clientHeight;
                let scrollTop = height += domHeight;
                //   将每一块二滚动距离添加到数组中
                this.scrollTopList.push(scrollTop)
            });
        },
        // 删除购物车
        reduce(specfoods,value) {
            if (specfoods.length > 1) {
                Toast("多规格商品只能去购物车删除哟！")
                return
            }
            // 获取当前要删除食品的规格
            let sku = specfoods[0];

            let cartList = this.$store.state.cartList;
            // 获取店铺购物车数据
            let list = cartList[this.id];
            // 查询当前要删除的sku
            let index = list.findIndex(item => {
                return item.sku_id == sku.sku_id;
            })
            if (index != -1) {
                if (list[index].num > 1) {
                    list[index].num--
                    // 将购物车数据存储到本地
                    localStorage.setItem("cartList", JSON.stringify(cartList))
                    // 更改仓库中的购物车数据
                    this.$store.commit("addCartList", cartList);
                    this.getFoodsNum();
                }else{
                    list.splice(index,1);
                    this.$set(value,"num",0)
                       // 将购物车数据存储到本地
                    localStorage.setItem("cartList", JSON.stringify(cartList))
                    // 更改仓库中的购物车数据
                    this.$store.commit("addCartList", cartList);
                  
                }
            }
        },
        // 加入购物车
        addCart(item) {
            // 获取仓库的购物车列表
            let cartList = this.$store.state.cartList;
            if (!cartList) {
                cartList = {}
                // 商品数量为一
                item.num = 1;
                cartList[this.id] = [item]
                // 将购物车数据存储到本地
                localStorage.setItem("cartList", JSON.stringify(cartList))
                // 更改仓库中的购物车数据
                this.$store.commit("addCartList", cartList);
                this.getFoodsNum();
                return
            }
            // 厂库中存在购物车数据
            // 判断对象中是否存在当前店铺id属性 存在为true 
            let isKey = cartList.hasOwnProperty(this.id);
            if (isKey) {
                //  判断当前加入购物车商品是否已存在 若不存在则直接添加到当前这个店铺对应的数组列表中，若存在则需要找到这个商品 将num++
                let index = cartList[this.id].findIndex(foods => {
                    return foods.sku_id == item.sku_id;
                })
                if (index == -1) {
                    item.num = 1;
                    cartList[this.id].push(item)
                } else {
                    cartList[this.id][index].num++;
                }
                // 将购物车数据存储到本地
                localStorage.setItem("cartList", JSON.stringify(cartList))
                // 更改仓库中的购物车数据
                this.$store.commit("addCartList", cartList)
                this.getFoodsNum();
            } else {
                // 商品数量为一
                item.num = 1;
                cartList[this.id] = [item]
                // 将购物车数据存储到本地
                localStorage.setItem("cartList", JSON.stringify(cartList))
                // 更改仓库中的购物车数据
                this.$store.commit("addCartList", cartList)
                this.getFoodsNum();
            }
        },
        // 获取店铺商品的购物车数量
        getFoodsNum() {
            let cartList = this.$store.state.cartList;
            if(!cartList){
               this.foods.forEach(item => {
                    item.foods.forEach(foods => {
                        this.$set(foods, 'num', 0)
                    })
                })
                return
            }

            if (cartList.hasOwnProperty(this.id)) {
                // 找到当前购物车数组中所有食物对应的所有数据
                this.foods.forEach(item => {
                    item.foods.forEach(a => {
                        a.specfoods.forEach(b => {
                            cartList[this.id].forEach(c => {
                                if (b.sku_id == c.sku_id) {
                                    this.$set(a, 'num', c.num)
                                }
                            })

                        })
                    })
                })
            }else {
                this.foods.forEach(item => {
                    item.foods.forEach(foods => {
                        this.$set(foods, 'num', 0)
                    })
                })
            }
        },
        clearView(){
            this.foods.forEach(item=>{
                item.foods.forEach((value)=>{
                        this.$set(value,'num',0)
              })
            })
        }

    },
    
    computed:{
        // 计算当前滚动到第几个导航
        getIndex(){
            // 查询 满足条件的索引
            return  this.scrollTopList.findIndex((item,index)=>{
                //判断当前滚动距离大于等于当前遍历的距离并且小于下一个距离
                    return this.scrollY>=item && this.scrollY<this.scrollTopList[index+1]
            })
        }
    }
}
</script>
<style lang="less" scoped>
.foods {
    width: 100vw;
    height: calc(100vh - 170px);
    padding-bottom: 50px;
    display: flex;
}

.nav_left {
    width: 25%;
    height: 100%;
    overflow: hidden;
    background: #F1F1F1;

    .nav_item {
        width: 100%;
        text-align: center;
        font-size: 13px;
        color: #666;
        background: #f1f1f1;
        padding: 15px 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.content_right {
    width: 75%;
    background: #fff;
    height: 100%;
    overflow: hidden;

    .title {
        font-size: 16px;
        color: #666;
        font-weight: bolder;
        padding: 10px 10px;
        background: #f1f1f1;

        span {
            font-size: 13px;
            color: #b4b4b4;
            margin-left: 10px;
            font-weight: normal;
        }
    }

    .foods_item {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        border-bottom: 1px solid #f1f1f1;

        .foods_img {
            width: 20%;

            img {
                width: 100%;
            }
        }

        .foods_right {
            width: 76%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 70px;

            .foodname {
                font-size: 17px;
                font-weight: bolder;
                color: #111;
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .food_msg {
                font-size: 13px;
                color: #b4b4b4;
            }

            .foodsprice {
                font-size: 15px;

                .price {
                    font-size: 17px;
                    color: #f60;
                    font-weight: bolder;
                }
            }
        }
    }
}

.active {
    background: #fff !important;
    border-left: 4px solid #3190e8 !important;
}

.reduce {
    display: inline-block;
    border: 1px solid #3190e8;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    text-align: center;
    line-height: 15px;
    padding-bottom: 4px;
}

.msk {
    background: #fff;
    position: relative;

    .guige {
        font-size: 14px;
        color: #666;
        margin-bottom: 10px;
    }

    .specfoods {
        display: flex;
        flex-wrap: wrap;

        .specfood_item {
            padding: 10px;
            border-radius: 3px;
            border: 1px solid #e4e4e4;
            margin-top: 10px;
            margin-right: 10px;
            font-size: 13px;
            color: #666;
        }

        .actives {
            border: 1px solid #3190e8;
            color: #3190e8;
        }
    }

    .close {
        position: absolute;
        right: 5px;
        top: -40px;
        font-size: 25px;
        color: #b4b4b4;
    }
}

.contr {
    display: flex;
    justify-content: space-between;
    background: #f1f1f1;
    font-size: 13px;
    padding: 7px;

    .price {
        color: #ff6000;
        height: 30px;
        line-height: 30px;
    }

    .btn {
        width: 100px;
        height: 30px;
        background: #3190e8;
        border-radius: 3px;
        text-align: center;
        line-height: 30px;
        color: #fff;
    }

}

.mydialog {
    border-radius: 5px !important;
}
</style>